<template>
	<div class="main">

		<div class="container" v-show="active" @click="handleClick">
			<div class="contain" style="cursor: pointer;">
				<div class="contain_header">
					<div style="cursor: pointer">手机账号登录</div>
					<br />
					<hr color=" #00b6b4" />
				</div>
				<!-- 学生学号登录 -->
				<div class="contain_header" @click="changeActive">
					<div style="cursor: pointer; color: #dadada">学生学号登录</div>
					<br />
					<hr color="#dadada" />
				</div>
			</div>
			<div style="padding-left: 3.125rem; padding-right: 3.125rem">

				<input v-model="use.username" type="text" placeholder="手机号" class="input" @blur="getPhone()" />
				<div class="requery">{{use1.username}}</div>
				<input v-model="use.password" type="password" placeholder="密码" class="input" @blur="getpassword()" />
				<div class="requery">{{use1.password}}</div>
				<button value="登	录" class="contain_buton" @click="Login">登 录</button>

			</div>
			<div class="contain_foot" style="cursor: pointer;">
				<a @click="register">新用户注册</a><a @click="yanzh">手机验证码登录</a>
			</div>
		</div>
		<div class="container" v-show="!active" style="height: 39.25rem">
			<div class="contain">
				<!-- 手机账号登录 -->
				<div class="contain_header" @click="changeActive">
					<div style="color: #dadada">手机账号登录</div>
					<br />
					<hr color="#dadada" />
				</div>
				<div class="contain_header">
					<div>学生学号登录</div>
					<br />
					<hr color=" #00b6b4" />
				</div>
			</div>
			<div style="padding-left: 3.125rem; padding-right: 3.125rem">
				<el-select v-model="user.roleId" placeholder="选择角色" style="width: 100%;">
					<el-option v-for="item in optionss" :key="item.roleId" :label="item.roleInstructions" :value="item.roleId">
					</el-option>
				</el-select>
				<el-select v-model="user.schoolId" placeholder="选择学校" style="width: 100%;margin-top: 1.25rem;">
					<el-option v-for="item in options" :key="item.schoolId" :label="item.schoolName" :value="item.schoolId">
					</el-option>
				</el-select>
				<input v-model="user.studentNum" type="text" placeholder="学号/工号" class="input1" @blur="getPhone1()" />
				<div class="requery">{{user1.studentNum}}</div>
				<input v-model="user.password" type="password" placeholder="密码" class="input1" @blur="getpassword1()" />
				<div class="requery">{{user1.password}}</div>
				<el-button type="text" value="登 录" class="contain_buton" @click="SchoolLogin()">确 定</el-button>
				<div class="contain_foot" style="justify-content: flex-end; margin-right: 0rem">
					<a @click="ForgetPassword()" style="cursor: pointer;">忘记密码</a>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		HttpManager
	} from '../../request/login.js'
	import {
		Regular
	} from '../../utils/regular.js'
	import {
		PersonManager
	} from "../../request/personCenter.js"
	export default {
		data() {
			return {
				mtk: false,
				activeName: "second",
				active: true,
				use: {
					// username: "15934827716",
					// password: "123456",
					username: "18797536539",
					password: "lcy52099",
				},
				use1: {
					username: '',
					password: ''
				},

				user: {
					shcoolId: "",
					studentNum: "",
					password: "",
				},
				user1: {
					shcoolId: "",
					studentNum: "",
					password: "",
				},

				usee: {
					phone: "",
					schoolId: "吉首大学",
					studentNum: "11233",
					gscode: "",
				},
				options: [],
				optionss: [],
				userPhoto:''



			};
		},
		created() {
			localStorage.clear();
			this.Init();
			this.getSchoolLoginRoleList();
		},
		methods: {
			//获取学校列表
			Init() {
				console.log('init')
				HttpManager.GetSchoolList()
					.then((res) => {
						this.options = res.data.data;
						// console.log(res.headers.role);
						// alert(res.headers.role);
					})

			},
			//获取角色列表
			getSchoolLoginRoleList() {
				this.axios.get("/MyLogin/getSchoolLoginRoleList").then(res => {
					// alert(1);
					this.optionss = res.data.data;
				})
			},
			tuichu() {
				this.mtk = false
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			changeActive() {
				this.active = !this.active;
			},
			register() {
				this.$router.push("/register");
			},
			yanzh() {
				this.$router.push("/verify");
			},
			//普通登录
			Login() {
				if (Regular.PhoneRegular(this.use.username)) {
					var params = this.qs.stringify(this.use);
					HttpManager.PhoneLogin(params).then((res) => {
						console.log('PhoneLogin', res)
						this.$message({
							showClose: true,
							message: '恭喜你，登录成功',
							type: 'success'
						}, 1000);
						console.log();
						const token = res.data;
						window.localStorage.setItem("token", token);
						localStorage.setItem("role",res.headers.role);
						if(res.headers.role=="teacher")
						{
							this.$router.push("/CourseList");
						}
						else{
							this.$router.push("/MainPage");
						}
						
						this.getUserInfo();

					})
				} else {
					this.$message({
						message: '请输入手机号和密码',
						type: 'warning'
					});
				}

			},
			//忘记密码
			ForgetPassword() {
				this.$router.push("/Forget")
			},
			//机构登录
			SchoolLogin() {
				var params = this.qs.stringify(this.user);
				HttpManager.SchoolLogin(params).then((res) => {
					if (res.status === 200) {
						this.$message({
							showClose: true,
							message: '恭喜你，登录成功',
							type: 'success'
						});
					}
				})

			},
			//手机正则
			getPhone() {

				if (this.use.username === "") {
					this.use1.username = "手机不能为空";
				} else if (!Regular.PhoneRegular(this.use.username)) {
					this.use1.username = "手机输入格式有问题";
				} else {
					this.use1.username = " ";
				}

			},
			//密码正则
			getpassword() {

				if (this.use.password === "") {
					this.use1.password = "密码不能为空";
				} else if (!Regular.PasswordRegular(this.use.password)) {
					this.use1.password = "密码输入格式有问题";
				} else {
					this.use1.password = '';
				}
			},
			//手机正则
			getPhone1() {

				if (this.user.studentNum === "") {
					this.user1.studentNum = "学号不能为空";
				} else {
					this.user1.studentNum = " ";
				}

			},
			//密码正则
			getpassword1() {

				if (this.user.password === "") {
					this.user1.password = "密码不能为空";
				} else if (!Regular.PasswordRegular(this.use.password)) {
					this.user1.password = "密码输入格式有问题";
				} else {
					this.user1.password = '';
				}
			},
			//获取用户信息
			getUserInfo()
			{
				var _that=this;
				PersonManager.getUserInfo().then(e=>{
					console.log(e);
					_that.userPhoto=e.data.data.userPhoto;
					localStorage.setItem("userPhoto",this.userPhoto)
				})
			}
		}

	};
</script>

<style scoped>
	.tan {
		width: 100%;
		height: 80%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.tuichu {
		width: 25px;
		height: 25px;
		border: 1px solid #aaa;
		border-radius: 50%;
		position: absolute;
		right: 10px;
		top: 10px;
		text-align: center;
		line-height: 20px;
		font-size: 25px;
	}

	.kka {
		background-color: #fff;
		width: 500px;
		height: 500px;
		position: relative;
		display: flex;
		align-items: center;

	}

	.mtk {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.yz {
		width: 100%;
		position: relative;
		display: flex;

	}

	.yzbtn {
		width: 8em;
		height: 3em;
		position: relative;
		top: 25px;
		border-radius: 30px;
	}

	* {
		box-sizing: border-box;
		outline: none;
		margin: 0;
		padding: 0;
	}

	.main {
		background-color: #00b6b4;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
	}

	.container {
		border-radius: 10px;
		height: 35.25rem;
		width: 34.375rem;
		background-color: #ffffff;
		box-shadow: 2px -2px 5px #e7e7e7;
	}

	img {
		position: absolute;
		right: 6.25rem;
	}

	.contain {
		display: flex;
		justify-content: center;
		padding: 3.125rem;
	}

	.contain_header {
		width: 14.125rem;
		text-align: center;
		font-weight: 300;
		font-size: 20px;
	}

	.input {
		width: 100%;
		height: 3rem;
		border-radius: 3.125rem;
		margin-top: 1.25rem;
		border: 0.0625rem solid #e7e7e7;
		padding-left: 2.5rem;
	}

	.input1 {
		width: 100%;
		height: 3rem;
		margin-top: 1.25rem;
		border: 0.0625rem solid #e7e7e7;
		padding-left: 1rem;
	}

	.contain_buton {
		width: 100%;
		height: 3rem;
		border-radius: 3.125rem;
		margin-top: 2.25rem;
		border: 0.0625rem solid #e7e7e7;
		text-align: center;
		color: #ffffff;
		font-weight: 300;
		background-color: #00b6b4;
	}

	.contain_buton:hover {
		background-image: radial-gradient(circle 248px at center,
			#16d9e3 0%,
			#69bec2 47%,
			#00b6b4 100%);
	}

	.contain_foot {
		display: flex;
		justify-content: space-between;
		margin-top: 2.5rem;
		margin-left: 3.6rem;
		margin-right: 3.6rem;
		color: #b5b5b5;
	}

	.requery {
		font-size: 0.8125rem;
		color: red;
	}
</style>
